<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User</title>
    <script th:src="@{/js/ctx.js}"></script>

    <link th:href="@{/js/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/js/jquery-2.1.4.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap-paginator.js}"></script>
    <script>
        function userList() {
            var url =ctx+"user/list";
            var jsonData={
                pageNo:1,
                pageSize:5,
                name:"userList"
            };
            var reqData=JSON.stringify(jsonData);
            $.ajax({
                url:url,
                data:reqData,
                type:"post",
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                success:function (data) {
                    console.log("res:",data);
                },
                error:function (xhr, ajaxOptions, thrownError) {
                    console.log("xhr:",xhr);
                    console.log("ajaxOpt:",ajaxOptions);
                    console.log("e:",thrownError);
                }
            });
        }
        function userListByPage() {
            var url = ctx+ "user/listByPage";
            var jsonData={
                pageNo:1,
                pageSize:5,
                name:"userListByPage"
            };
            var reqData=JSON.stringify(jsonData);
            $.ajax({
                url:url,
                data:reqData,
                dataType:"json",
                type:"post",
                contentType:"application/json;charset=utf-8",
                success:function (data) {
                    console.log("res:",data);
                },
                error:function (xhr, ajaxOptions, thrownError) {
                    console.log("xhr:",xhr);
                    console.log("ajaxOpt:",ajaxOptions);
                    console.log("e:",thrownError);
                }
            });
        }
        $(function () {
            $('#pageLimit').bootstrapPaginator({
                currentPage: 1,
                totalPages: 10,
                size:"normal",
                bootstrapMajorVersion: 3,
                alignment:"right",
                numberOfPages:5,
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first": return "首页";
                        case "prev": return "上一页";
                        case "next": return "下一页";
                        case "last": return "末页";
                        case "page": return page;
                    }
                }
            });
        });
    </script>
</head>
<body>
<input id="btn1" type="button" value="userList" onclick="userList()"><br>
<input id="btn2" type="button" value="userListByPage" onclick="userListByPage()"><br>
<div id="Paginator" style="text-align: center"> <ul id="pageLimit"></ul> </div>
</body>
</html>